<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>/public/js/flexigrid/css/flexigrid.pack.css"/>
<script src="<?php echo base_url();?>/public/js/flexigrid/js/flexigrid.pack.js" type="text/javascript"></script>

<script>
    $(document).ready(function(){
       // solicitudes();
        limpiarDetalles();
    });
</script>  


<br><br>

<div class="detalle"></div><br><br>

<table class="datosDatagrip" onclick="detalle()" ></table>

<script>
    $('.datosDatagrip').flexigrid({
        url:'<?php echo site_url() ?>/datocliente_historico/data/',
        dataType: 'json',
        colModel : [
            {display: 'ID', name : 'Id_Referencia', width : 0, sortable : true, align: 'center'},
            {display: 'Detalle', name :'Referencia', width : 150, sortable : true, align: 'center'},
            {display: 'Nombre Servicio', name : 'NombreServicio', width : 75, sortable : true, align: 'center'},
            {display: 'Salida', name : 'date', width : 55, sortable : true, align: 'center'},
            {display: 'Telefono', name : 'Telefono1', width : 60, sortable : true, align: 'center'},
            {display: 'Celular', name : 'Telefono2', width : 60, sortable : true, align: 'center'},
            {display: 'Contacto', name : 'Contacto', width : 90, sortable : true, align: 'center'},
            {display: 'Contacto Entrega', name : 'Entregado_A', width : 90, sortable : true, align: 'center'},           
            {display: 'Email', name : 'Email_Cia', width : 100, sortable : true, align: 'center'},
        ],
        searchitems : [
            {display: 'Detalle', name :'Referencia', isdefault: true},
            {display: 'Tipo Servicio', name : 'NombreServicio'},
            {display: 'Fecha Salida', name : 'date'},
            {display: 'ID', name : 'Id_Referencia'} 
        ],
        
         buttons : [
           
        ],
      
        title: "Compañias",
        sortname: 'Id_Referencia',
        sortorder: 'asc',
        multiselect: false,
        usepager: true,
        rp: 10,
        showTableToggleBtn: true,
        width: 'auto',
        height: 'auto',
        resizable: false,
        multidatagrip:cargarDetalles,
        multidatagripL:limpiarDetalles
    })
    
    function detalle(){
  
       
        }
  
  function cargarDetalles(){
  
        var id = $(".trSelected #Id_Referencia div").html(); 
	    
        if(id < 1){
       
            return;
        }
        
        $(".detalle").load("<?php echo site_url() ?>/datocliente_detalle/", {id:id});  
    }

    function limpiarDetalles(){
        $(".detalle").load("<?php echo site_url() ?>/datocliente_detalle/", {id:0});
    }
    
   
</script>


